<template>
  <div style="margin-top: 10px">
    <el-tabs type="border-card">
      <el-tab-pane :label="detailData.labelText">

        <el-row v-for="(row,index) in detailData.commodity" :key="index" :style="{}">

          <!-- 显示标题 -->
          <el-col :span="row.labelSpan || 3">
            <span class="textStyle" style="line-height: 50px">{{row.label}}</span>
          </el-col>

          <!-- 价格 -->
          <el-col :span="row.valSpan || 21" style="text-align: center;" v-if="row.type === 'price'">
            <span class="redTextStyle">￥</span> <span class="redTextStyle"
                                                      style="font-size: 35px"> {{ row.prop }}</span>
          </el-col>

          <!-- 优惠 -->
          <el-col :span="row.valSpan || 21" style="text-align: center" v-if="row.type === 'discount'">
            <span class="redTextStyle">￥</span> <span class="redTextStyle" style="font-size: 35px;color: red"> {{ row.prop }}</span>
          </el-col>

          <!-- 物流 -->
          <el-col :span="row.valSpan || 21" style="text-align: center" v-if="row.type === 'logistics'"
                  :class="isBuyClick && !ruleForm.clientReceivingAddress ? 'notNull':null">
            <el-row>
              <el-col :span="11">
                    <span class="textStyle"
                          style="color: #1f2d3d;line-height: 49px"> {{ row.prop.deliverGoods }} </span>
              </el-col>
              <el-col :span="2">
                <span style="line-height: 50px">至</span>
              </el-col>
              <el-col :span="11">
                <el-cascader
                  style="margin-top: 8px"
                  size="mini"
                  v-model="ruleForm.clientReceivingAddress"
                  :options="district"
                  @change="chooseClientReceivingAddress"></el-cascader>
              </el-col>
            </el-row>
          </el-col>

          <!-- 颜色分类 -->
          <el-col :span="row.valSpan || 21" style="text-align: center" v-if="row.type === 'colorImage'"
                  :class="isBuyClick && !ruleForm.color ? 'notNull':null">
            <span
              v-for="(item,index) in row.prop" :key="index"
              style="line-height: 49px;margin-left: 10px"
              @click="clickcategory(index,row)"
              :class="{clickSize:categoryIndex===index}"
            > <a>{{item.colorNameEn}}</a> </span>
          </el-col>

          <!-- 尺码 -->
          <el-col :span="row.valSpan || 21" style="text-align: center" v-if="row.type === 'size'"
                  :class="isBuyClick && !ruleForm.size ? 'notNull':null">
                <span v-for="(item,index) in row.prop"
                      :class="{clickSize:sizeIndex===index}"
                      style="line-height: 40px;margin-left: 5%;font-size: 10px;margin-top: 10px"
                      :key="index"
                      @click="clickSize(item,index)">
                  <a>{{item.commoditySize}} </a> </span>
          </el-col>

          <!-- 购买数量 -->
          <el-col :span="row.valSpan || 21" style="text-align: center" v-if="row.type === 'number'"
                  :class="isBuyClick &&  ruleForm.number <= 0 ? 'notNull':null">
            <el-input-number v-model="ruleForm.number"  style="margin-top: 10px"
                             size="mini"></el-input-number>
          </el-col>

        </el-row>

      </el-tab-pane>
    </el-tabs>

    <el-row style="margin-top: 5%">
      <el-col :span="9" style="text-align: center">
        <el-button type="success" style="width: 50%" @click="buyGoods">立即购买</el-button>
      </el-col>
      <el-col :span="9">
        <el-button type="danger" style="width: 50%">
          <i class="el-icon-shopping-cart-2"></i>
          加入购物车
        </el-button>
      </el-col>
    </el-row>


    <el-dialog
      title="添加其他信息"
      :visible.sync="ruleForm.dialogVisible"
      width="40%"
      :before-close="handleClose">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">

        <el-form-item label="详细收货地址" prop="address">
          <el-input v-model="ruleForm.address" type="textarea" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="请选择快递" prop="pkExpressId">
          <el-select v-model="ruleForm.pkExpressId" placeholder="请选择" size="mini">
            <el-option
              v-for="item in express"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" size="mini">确 定</el-button>
          <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button>
        </el-form-item>
      </el-form>


    </el-dialog>


  </div>
</template>


<script>

  import BaseVue from '../../components/BaseVue'
  import {selectAllDistrict} from "../../api/district";
  import {selectAllExpress} from "../../api/sellerCenter";

  export default {
    name: 'ShopDetailsRightExhibition',
    extends: BaseVue,
    props: {
      detailData: {
        type: Object,
        default: () => {
          return {
            labelText: '现货',
            commodity: [
              {label: '价格', prop: 235, labelSpan: 8, type: 'price', valSpan: 16},
              {label: '优惠', prop: 20, labelSpan: 8, type: 'discount', valSpan: 16},
              {label: '物流', prop: 0, labelSpan: 8, type: 'logistics', valSpan: 16},
              {label: '颜色分类', prop: [], labelSpan: 3, type: 'colorImage', valSpan: 22},
              {label: '尺码', prop: [], labelSpan: 2, type: 'size', valSpan: 22},
              {label: '购买数量', prop: 0, labelSpan: 3, type: 'number', valSpan: 21},
            ],
          }
        }
      }

    },

    created() {
      this.initDistrict()
      this.initAllExpress()
    },

    data() {
      return {
        ruleForm: {
          dialogVisible:false,
          address: null,
          pkExpressId:null,
          color: null,  //颜色
          size: null,    //大小
          clientReceivingAddress: null,  //物流
          number: 0,        //数量
        },
        rules:{
          address:[
            { required: true, message: '请输入详细地址', trigger: 'blur' },
          ],
          pkExpressId:[
            { required: true, message: '请选择快递', trigger: 'blur' },
          ]
        },
        express: [],
        isBuyClick: false,
        categoryIndex: null,
        sizeIndex: null,
        district: [],
      }
    },
    methods: {

      handleClose(){
        this.ruleForm.dialogVisible = false
      },

      initAllExpress() {
        return new Promise((resolve, reject) => {
          selectAllExpress().then(response => {
            this.express = response.data.map(k => {
              return {
                value: k.pkExpressId,
                label: k.expressName
              }
            })
          })
        })
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit("purchase",this.ruleForm)
          }
        });
      },

      buyGoods() {
        if (this.ruleForm.number === null || this.ruleForm.categoryIndex === null || this.ruleForm.color === null || this.ruleForm.size === null || this.ruleForm.clientReceivingAddress === null){
         return this.isBuyClick = true
        }
        this.ruleForm.dialogVisible = true
      },

      initDistrict() {
        return new Promise((resolve, reject) => {
          selectAllDistrict().then(response => {
            response.data.forEach(k => {
              let obj = {};
              obj.children = [];
              obj.value = k.pkDistrictId;
              obj.label = k.name;
              obj.pid = k.pid;
              if (k.districtDos.length > 0) {
                k.districtDos.forEach(v => {
                  let item = {};
                  item.value = v.pkDistrictId;
                  item.label = v.name;
                  item.pid = v.pid;
                  obj.children.push(item)
                })
              }
              this.district.push(obj)
            })
          })
        })
      },


      /**
       * 颜色分类
       * @param index
       * @param row
       */
      clickcategory(index, row) {
        this.categoryIndex = index;
        this.ruleForm.color = row.prop[index].fkProductId;
        this.$emit('chooseColor', this.ruleForm.color)
      },

      /**
       * 尺码
       * @param row
       * @param index
       */
      clickSize(row, index) {
        this.sizeIndex = index;
        this.ruleForm.size = row.pkCommoditySizeId;
      },

      /**
       * 物流
       * @param value
       */
      chooseClientReceivingAddress(value) {
        this.ruleForm.clientReceivingAddress = value;
      }
    }
  }
</script>

<style scoped>

  .notNull {
    border: 1px solid red;
  }

  .divMoveOver {
    border: 1px solid red;
  }

  .textStyle {
    color: rgb(136, 136, 136);
  }

  .clickSize {
    color: red;
  }

  .redTextStyle {
    color: rgb(255, 155, 0);
    font-size: 20px;
  }
</style>
